<template>
  <div
    class="efficdivzzn fwwcc"
    :style="{
      '--ss': getscalepxc(15),
      '--sh': getscalepxc(20),
      '--bc': 'red',
      bottom: getscalepxc(45),
      height: getscalepxc(15),
    }"
    v-if="ifeffic"
  >
    <div :style="{}" class="efficdivsel fwwcc">
      <el-select
        v-model="selected"
        placeholder
        popper-class="effsel"
        :style="{
          width: getscalepxc(150),
        }"
        @change="selchange"
        :popper-append-to-body="true"
      >
        <el-option
          v-for="item in selectopt"
          :style="{
            '--px20': getscalepxc(17),
            '--px25': getscalepxc(20),
          }"
          :key="item.code"
          :label="item.name"
          :value="item.code"
        ></el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
import axios from "@/utils/requestzz";
import defaultmixins from "@/mixins/bigScreen/defaultmixins";

import commonmixins from "@/mixins/bigScreen/commonmixins";

//能效图组件

export default {
  name: "efficiencyzzn",
  mixins: [defaultmixins, commonmixins],
  components: {},
  data() {
    return {
      selectopt: [],

      colors: [
        "#E70012",
        "#F3602C",
        "#F39801",
        "#F8B62C",
        "#F9EE00",
        "#DAE000",
        "#A7D131",
        "#3CC573",
        "#52EBE9",
        "#017BE8",
      ],

      selected: "",
      g_areaData: [],
      config_data: "",
    };
  },
  computed: {
    ishistory: function () {
      return this.$store.state.daping.ishistorytime;
    },
    timerangarr: function () {
      return this.$store.state.daping.timepick;
    },
    ifeffic: function () {
      return this.$store.state.daping.scencetype == "nengxiao";
    },
  },
  watch: {
    selected: {
      handler: function (n, o) {
        if (this.$root.efficiency_data != {}) {
          console.log(this.$root.efficiency_data);
          this.loadeffic(n);
        }
      },
    },
    "$store.state.daping.scencetype": {
      handler: function (n, o) {
        if (this.$store.state.daping.scencetype == "nengxiao") {
          this.selected = "m_019t_1";
          // this.selected = "m_003qc";
        }
      },
    },
    "$store.state.daping.efficiency.config_data": {
      handler: function (n, o) {
        //根据接口生成下拉框
        if (this.$root.efficiency_data != "") {
          this.selectopt = [];
          Object.keys(this.$root.efficiency_data.config_data).map((key) => {
            let item = this.$root.efficiency_data.config_data[key];
            this.selectopt.push({
              name: item["description"],
              code: item["name"],
            });
          });
          console.log(this.selectopt);
        }
      },
    },
  },
  mounted() {},
  methods: {
    getunit(n) {
      var min = 0,
        step = 0,
        section = 10; //section默认为10

      var varObj = this.config_data[n];
      let color = varObj["color"];
      min = varObj["minValue"];
      step = varObj["step"];

      let rangeArr = [];
      if (varObj["legend"]) {
        rangeArr = varObj["legend"].split("@@");
      } else {
        //格式化
        var toFixedLength = this.calcToFixedLength(min, step);
        for (var i = 0; i < section; i++) {
          if (i == 0) {
            rangeArr.push("<" + (min + step * i).toFixed(toFixedLength));
          } else if (i == section - 1) {
            rangeArr.push("≥" + (min + step * (i - 1)).toFixed(toFixedLength));
          } else {
            rangeArr.push(
              (min + step * (i - 1)).toFixed(toFixedLength) +
                "~" +
                (min + step * i).toFixed(toFixedLength)
            );
          }
        }
        rangeArr.reverse();
      }

      this.$store.state.daping.efficiency.colors = color.split("@@");
      this.$store.state.daping.efficiency.colorvalmap = rangeArr;
      this.$store.state.daping.efficiency.type = n;
    },

    calcToFixedLength(a, b) {
      //计算两个数值a和b 小数点后有几位 并且返回结果最长的那个
      a = a.toString();
      b = b.toString();

      var aPoint = a.indexOf("."); //小数点的位置
      var bPoint = b.indexOf(".");
      var aNum = 0; //小数的位数
      var bNum = 0;

      if (aPoint != -1) {
        aNum = a.length - aPoint - 1;
      }
      if (bPoint != -1) {
        bNum = b.length - bPoint - 1;
      }
      if (aNum >= bNum) {
        return aNum;
      } else {
        return bNum;
      }
    },

    selchange(n) {
      // this.selected = n
    },

    loadeffic(n) {
      if (this.$root.efficiency_data != "") {
        this.config_data = this.$root.efficiency_data["config_data"];
        this.getunit(n);
        this.$store.state.daping.efficiency.g_data_arr = this.$root.efficiency_data[
          "efficiencydata"
        ];
        this.$store.state.daping.threecom.switchnengxiaotype(
          this.$root.efficiency_data["efficiencydata"]
        );
      }
    },
  },
};
</script>
<style lang='scss'>
.efficdivzzn {
  height: 100%;
  position: absolute;
}

.el-select-dropdown__item {
  span {
    font-size: var(--ss);
  }
}

.el-select .el-input .el-select__caret {
  // color: var(--bc) !important;
}

.effsel {
  .el-input__inner {
    background-color: #409eff55;
    border-color: #409eff99;
    color: #fff;
    font-size: var(--ss);
    height: var(--sh);
  }

  .el-select-dropdown__wrap {
    background-color: #5555;
    color: white;
  }

  .el-select-dropdown__item {
    font-size: var(--px20) !important;
    // padding: var(--px20);
    color: white;
    background-color: #2d394599;
    height: var(--px25);
    line-height: var(--px25);
  }

  .el-select-dropdown__wrap {
    // max-height: var(--px20);
    background-color: #2d3945;
    color: white;
  }

  .el-select .el-input .el-select__caret {
    color: #c0c4cc;
    font-size: var(--px20);
  }
}

.efficdivsel {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  height: 100%;
}
</style>